import React from 'react'
import {AutoComplete, Button, Divider, Form, Input, InputNumber, Select} from 'antd'
import {FormattedMessage} from 'react-intl'
import {convertContent} from "../../constant/lang-util"
import {searchTags} from "../../actions/tag"
import {connect} from 'react-redux'
import {searchUser} from "../../actions/user";

const Option = Select.Option

class SearchBox extends React.Component {

  componentDidMount = () => {
    this.props.searchTags()
  }

  searchUsers = userName => {
    this.props.searchUsers(userName)
  }

  resetForm = () => {
    this.props.form.resetFields()
  }

  handleSubmit = (e) => {
    e.preventDefault();
    const {form, users} = this.props
    form.validateFields((err, values) => {
      if (!err) {
        const user = users.find(user => user.username === values.username) || {}
        values = Object.assign({}, {...values}, {userId: user.id})
        this.props.onSearch(values)
      }
    })
  }

  render() {
    const {tags, form, users, hideTagsInput} = this.props
    const {getFieldDecorator} = form
    const userDataSource = users.map(user => user.username)

    return <Form layout="inline" onSubmit={this.handleSubmit}>
      <Form.Item>
        <FormattedMessage id='查询'/>：
      </Form.Item>
      <Form.Item>
        {getFieldDecorator('id')(
          <InputNumber
            style={{width: 150}}
            placeholder={convertContent('输入ID')}/>
        )}
      </Form.Item>
      <Form.Item>
        {getFieldDecorator('username')(
          <AutoComplete
            dataSource={userDataSource}
            style={{width: 150}}
            onSelect={this.onSelect}
            onSearch={this.searchUsers}
            placeholder={<FormattedMessage id='输入创建者'/>}
          />
        )}
      </Form.Item>
      <Form.Item>
        {getFieldDecorator('description')(
          <Input
            style={{width: 150}}
            className='select-auto-input'
            placeholder={convertContent('输入描述内容')}
          />
        )}
      </Form.Item>
      {
        hideTagsInput ?
          ''
          :
          <Form.Item>
            {getFieldDecorator('tags')(
              <Select
                mode='multiple'
                style={{width: 150}}
                placeholder={<FormattedMessage id='输入标签'/>}>
                {tags.map(tag => <Option key={tag.name} value={tag.name}>{tag.name}</Option>)}
              </Select>
            )}
          </Form.Item>
      }

      <Form.Item>
        <Button type="primary" icon="search" htmlType="submit"><FormattedMessage id='查询'/></Button>
        <Divider type='vertical'/>
        <Button onClick={this.resetForm} icon='redo'><FormattedMessage id='重置条件'/></Button>
      </Form.Item>
    </Form>
  }
}

const mapStateToProps = ({searchTags, userInfo}) => ({
  tags: searchTags,
  users: userInfo.users
})

const mapDispatchToProps = dispatch => ({
  searchTags: () => dispatch(searchTags()),
  searchUsers: userName => dispatch(searchUser(userName))
})

const SearchBoxForm = Form.create()(SearchBox)
export default connect(mapStateToProps, mapDispatchToProps)(SearchBoxForm)
